import styled from 'styled-components'
export const DiscoverContainer = styled.div`
	width: 100%;
`
//BannerContainer 轮播图容器组件
export const BannerContainer = styled.div`
	width: 100%;
	text-align: center;
	.swiper-button-next:after,
	.swiper-button-prev:after {
		color: #fff;
		font-size:.5rem;
		padding: 0.1rem;
		background-color: rgba(0, 0, 0, 0.3);
	}
	@media screen and (max-width: 1024px) {
		& {
			width: 100%;
		}
	}
`
//包裹轮播图的组件，内部虚拟模糊背景！
export const BannerItem = styled.div.attrs((props) => {
	return {
		backgroundUrl: props.backgroundUrl,
	}
})`
	position: relative;
	overflow: hidden;
	//背景虚化
	&::after {
		content: '';
		width: 100%;
		height: 100%;
		-webkit-filter: blur(60px);
		filter: blur(18px);
		background-image: url(${(props) => props.backgroundUrl});
		position: absolute;
		left: -2px;
		top: -10px;
		z-index: 0;
	}
	//图片部分
	img.cover {
		margin: auto;
		object-fit: contain;
		position: relative;
		width: 730px;
		height: 100%;
		z-index: 1;
	}
	.typeTitle {
		position: absolute;
		z-index: 2;
		bottom: 10px;
		right: 10px;
		background: #f00;
		color: #fff;
		padding: 10px;
		border-radius: 16px 0px 16px 0px;
	}
	//响应式
	@media screen and (max-width: 1024px) {
		img.cover {
			width: 100%;
			height: 100%;
		}
	}
`
